import { Frame, LifeBuoy, Map, PieChart, Send } from "lucide-react"
import * as React from "react"

import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSkeleton,
   SidebarProvider,
} from "~/registry/miami/ui/sidebar"

const projects = [
   {
      name: "Design Engineering",
      url: "#",
      icon: Frame,
      badge: "24",
   },
   {
      name: "Sales & Marketing",
      url: "#",
      icon: PieChart,
      badge: "12",
   },
   {
      name: "Travel",
      url: "#",
      icon: Map,
      badge: "3",
   },
   {
      name: "Support",
      url: "#",
      icon: LifeBuoy,
      badge: "21",
   },
   {
      name: "Feedback",
      url: "#",
      icon: Send,
      badge: "8",
   },
]

// Dummy fetch function
async function fetchProjects() {
   await new Promise((resolve) => setTimeout(resolve, 3000))
   return projects
}

export default function AppSidebar() {
   return (
      <SidebarProvider>
         <Sidebar>
            <SidebarContent>
               <SidebarGroup>
                  <SidebarGroupLabel>Projects</SidebarGroupLabel>
                  <SidebarGroupContent>
                     <React.Suspense fallback={<NavProjectsSkeleton />}>
                        <NavProjects />
                     </React.Suspense>
                  </SidebarGroupContent>
               </SidebarGroup>
            </SidebarContent>
         </Sidebar>
      </SidebarProvider>
   )
}

function NavProjectsSkeleton() {
   return (
      <SidebarMenu>
         {Array.from({ length: 5 }).map((_, index) => (
            <SidebarMenuItem key={index}>
               <SidebarMenuSkeleton showIcon />
            </SidebarMenuItem>
         ))}
      </SidebarMenu>
   )
}

async function NavProjects() {
   const projects = await fetchProjects()

   return (
      <SidebarMenu>
         {projects.map((project) => (
            <SidebarMenuItem key={project.name}>
               <SidebarMenuButton asChild>
                  <a href={project.url}>
                     <project.icon />
                     <span>{project.name}</span>
                  </a>
               </SidebarMenuButton>
            </SidebarMenuItem>
         ))}
      </SidebarMenu>
   )
}
